<template>
  <div class="container-main">
    <!--查询表单-->
    <el-row :gutter="10">
      <el-form :inline="true" ref="queryForm" :model="queryForm">
        <el-form-item label="书籍名称:" prop="bookName">
          <el-input v-model="queryForm.bookName" placeholder="请输入书籍名称"></el-input>
        </el-form-item>
        <el-form-item label="ISBN:" prop="isbn">
          <el-input v-model="queryForm.isbn" placeholder="请输入isbn号码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryBookInfo" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetForm" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!--新增、其他按钮-->
    <el-row>
      <el-col :span="24">
        <div style="float: left;margin-top: 10px;margin-bottom: 10px">
          <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateClick(true,null)">新增</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteBatch">批量删除</el-button>
        </div>
      </el-col>
    </el-row>
    <!--数据表格-->
    <el-row>
      <el-col :span="24">
        <div>
          <!--表格数据-->
          <el-table
              ref="bookTable"
              :data="bookTableData"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              stripe
              border
              style="width: 100%">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="bookImgUrl"
                label="预览图片"
                align="center"
                show-overflow-tooltip
            >
              <template slot-scope="scope">
                <img :src="scope.row.bookImgUrl" class="book-img">
              </template>
            </el-table-column>
            <el-table-column
                prop="isbn"
                label="isbn号码"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="bookName"
                label="书籍名称"
                align="center"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="author"
                label="作者"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="press"
                label="出版社"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="publishDate"
                label="出版日期"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
            >
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="详情" placement="top">
                  <el-button type="success" size="small" @click="bookDetailClick(scope.row)" icon="el-icon-view"
                             circle></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="修改" placement="top">
                  <el-button type="primary" size="small" @click="addOrUpdateClick(false,scope.row)" icon="el-icon-edit"
                             circle></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteClick(scope.row)"
                             circle></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!--分页-->
    <el-row>
      <handle-page ref="handlePage" @queryInfo="queryBookInfo"></handle-page>
    </el-row>
    <!--新增、修改弹窗-->
    <book-dialog ref="bookDialog" @queryBookInfo="queryBookInfo"></book-dialog>
    <!--查看详情弹窗-->
    <book-detail-dialog ref="bookDetailDialog" ></book-detail-dialog>
  </div>
</template>

<script>
import BookDialog from "@/views/Book/components/BookDialog";
import BookDetailDialog from "@/views/Book/components/BookDetailDialog";
import HandlePage from "@/components/page/HandlePage.vue";
import {deleteBook, queryBook} from "@/api/book";

export default {
  name: "BookIndex",
  components: {
    BookDialog,
    BookDetailDialog,
    HandlePage
  },
  data() {
    return {
      // 存放表格数据
      bookTableData: [],
      saveVisible: false,
      showTitle: false,
      // 加载
      loading: false,
      queryForm: {}
    }
  },
  mounted() {
    this.queryBookInfo();
  },
  methods: {
    /**
     * 分页查询
     */
    queryBookInfo() {
      this.queryForm.current = this.$refs.handlePage.currentPage;
      this.queryForm.size = this.$refs.handlePage.pageSize;
      this.loading = true
      queryBook(this.queryForm).then((res) => {
        this.loading = false
        this.bookTableData = res.data.records
        this.$refs.handlePage.total = res.data.total
      }).catch(error=>{
        console.error(error)
      })
    },
    /**
     * flag = true: 新增
     * flag = false：修改
     * @param flag
     * @param data
     */
    addOrUpdateClick(flag,data = null){
      if(flag){
        this.$refs.bookDialog.showTitle = true;
      }else{
        this.$refs.bookDialog.showTitle = false;
        this.$refs.bookDialog.bookForm = JSON.parse(JSON.stringify(data));
      }
      this.$refs.bookDialog.saveVisible = true;
    },
    /**
     * 查看详情弹窗
     * @param row
     */
    bookDetailClick(row) {
      this.$refs.bookDetailDialog.dialogVisible = true;
      this.$refs.bookDetailDialog.bookId = row.id;
    },
    /**
     * 批量删除
     */
    deleteBatch() {
      // 获取选中数据
      let selectData = this.$refs.userTable.selection;
      if (selectData.length > 0) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = [];
          selectData.forEach(item => {
            ids.push(item.id);
          })
          deleteBook(ids).then((res) => {
            if (res.data === true) {
              this.queryBookInfo();
              this.$message({
                type: 'success',
                message: res.msg
              });
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          }).catch(error=>{
            console.error(error)
          });
        });
      } else {
        this.$message({
          type: 'warning',
          message: '请至少选择一行数据'
        });
      }
    },
    /**
     * 删除
     * @param row
     */
    deleteClick(row) {
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = [];
        ids.push(row.id)
        deleteBook(ids).then((res) => {
          if (res.data === true) {
            this.queryBookInfo();
            this.$message({
              type: 'success',
              message: res.msg
            });
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
        }).catch(error=>{
          console.error(error)
        });
      });
    },
    /**
     * 重置
     */
    resetForm() {
      // 清空表单内容
      this.$nextTick(() => {
        this.$refs['queryForm'].resetFields();
      })
    }
  }
}
</script>

<style scoped>
.book-img {
  width: 50px;
  height: 50px;
}
</style>
